<template>
  <div class="sub-box-border body" v-loading="loading">
    <div class="left-align sub-title">提交作业</div>
    <el-divider></el-divider>
    <div style="width: 300px;height: 170px;">
      <el-form ref="form" label-width="80px" size="mini">
        <el-form-item label="作业名称">
          <el-select v-model="selectedIndex" placeholder="请选择提交的课程">
              <el-option v-for="(collection,index) in collectionTable" :key="collection.index" :label="collection.collectionName" :value="index" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="课程介绍">
          <el-input disabled :value="showCollectionIntroduction"></el-input>
        </el-form-item>
        <el-form-item label="课程要求">
          <el-input disabled :value="showCollectionRequest"></el-input>
        </el-form-item>
        <el-form-item label="课程时间">
          <el-date-picker
            disabled
            v-model="showCollectionTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <div class="margin">
      <el-upload
        class="upload-demo"
        drag
        action="http://www.embeddedvr.net/homework/fileUpload"
        :on-success=uploadSuccess
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">仅可提交一份文件</div>
      </el-upload>
    </div>
    <div id="editor" class="margin" style="width: 100%;">
    </div>
    <div class="margin">
      <el-button @click="submit">提交</el-button>
      <el-button @click="">清空</el-button>
    </div>
  </div>
</template>

<script>
    import E from 'wangeditor';  //导入富文本编辑器
    import OSS from 'ali-oss';
    export default {
        name: "Edit",
        data(){
          return {
            loading: false,
            selectedIndex: null,
            editor: '',
            homework:{
              userId: null,
              homeworkId: null,
              homeworkContent: null,
              homeworkState: null,
              collectionId: null,
              homeworkFileAddress: ''
            },
            collectionTable:[  //vue监听不到深层次的对象属性或者数组值的改变
            ]
          }
        },
        computed:{
          showCollectionIntroduction:function(){
            let data = this.$data;
            return data.collectionTable[data.selectedIndex]?data.collectionTable[data.selectedIndex].collectionIntroduction:"";  //注意:在js中0==''
          },
          showCollectionRequest:function(){
            let data = this.$data;
            return data.collectionTable[data.selectedIndex]?data.collectionTable[data.selectedIndex].collectionRequest:"";
          },
          showCollectionTime:function(){
            let data = this.$data;
            let time = [];
            if(data.collectionTable[data.selectedIndex]!=null){
              time[0]=data.collectionTable[data.selectedIndex].collectionStartTime;
              time[1]=data.collectionTable[data.selectedIndex].collectionEndTime;
            }
            return time;
          }
        },
        methods:{
          getCollectionTable(){
            let that = this;
            let data = this.$data;
            let qs = require("qs");
            data.loading=true;
            this.axios.post("/collection/getunpassedcollection",qs.stringify({
              userId: data.homework.userId
            }))
            .then(response => {
              let resData = response.data;
              if(resData.errCode == 200){
                data.collectionTable = resData.data.slice(0,resData.data.length);
              }else{
                that.$message({
                  type: "error",
                  message: resData.errMsg
                })
              }
              data.loading=false;
            })
          },
          getHomework(){
            let that = this;
            let data = this.$data;
            let qs = require("qs");
            return ;
            let collection = data.collectionTable[data.selectedIndex];
            data.homework.collectionId = collection.collectionId;
            this.axios.post("/homework/showhomeworkbyuseridandcollectionid",qs.stringify(data.homework))
              .then(response => {
                let resData = response.data;
                if(resData.errCode == 200){
                  data.homework = resData.data;
                }
              })
          },
          getEditor(){
            let that = this;
            let data = this.$data;
            data.editor = new E('#editor');
            let editor = data.editor;
            editor.config.zIndex = 100;
            editor.create();
            //阿里云图片上传
            let client = new OSS({
              region: "oss-cn-beijing", // 存储区域代号
              accessKeyId: "LTAI4G5NuR5kxC3vzLHj8khX",
              accessKeySecret: "myLMEsVDdVHL28ZVOEP4x7weRu6QE0",
              bucket: "arnovc", // 存储空间名
            });
            editor.config.customUploadImg = function (resultFiles, insertImgFn) {
              // resultFiles 是 input 中选中的文件列表
              // insertImgFn 是获取图片 url 后，插入到编辑器的方法
              client.put('test', resultFiles[0])
                .then(function (res) {
                  // 上传图片，返回结果，将图片插入到编辑器中
                  insertImgFn(res.url)
                }).catch(function (err) {
              })
            }
          },
          submit:function(){
            let that = this;
            let data = this.$data;
            let qs = require("qs");
            if(data.selectedIndex==null){
              this.$message({
                message: '请先选择有效的作业集',
                type: 'warning'
              })
              return ;
            }
            data.loading=true;
            data.homework.homeworkContent = data.editor.txt.html();
            let collection = data.collectionTable[data.selectedIndex];
            if(collection!=null){
              data.homework.collectionId=collection.collectionId;
            }else{
              that.$message("请先选择有效的作业集!");
            }
            this.axios.post("/homework/submithomework",qs.stringify({
              userId: data.homework.userId,
              homeworkId: data.homework.homeworkId,
              homeworkState: data.homework.homeworkState,
              homeworkContent: data.homework.homeworkContent,
              homeworkFileAddress: data.homework.homeworkFileAddress,
              collectionId: collection.collectionId,
              collectionStartTime: collection.collectionStartTime,
              collectionEndTime: collection.collectionEndTime
            }))
            .then(response => {
              let resData = response.data;
              if(resData.errCode==200){
                that.$message({
                  type: "success",
                  message: "提交成功!"
                })
                data.homework.homeworkId = resData.data;
                data.homework.homeworkState=1;
              }else{
                that.$message({
                  type: "error",
                  message: resData.errMsg
                })
              }
              data.loading=false;
            })
          },
          uploadSuccess:function (resData,file,fileList) {
            let data = this.$data;
            let that = this;
            if(resData.errCode == 200){
              data.homework.homeworkFileAddress = resData.data;
              that.$message({
                type: 'success',
                message: "上传成功"
              })
            }else{
              that.$message(resData.errMsg);
            }
          }
        },
        created:function(){
          let data = this.$data;
          // 生产环境
          //data.homework.userId = this.$store.state.user.userId;
          //this.getCollectionTable();
        },
        mounted:function(){
          this.getEditor();
          //this.getHomework();
        },
    }
</script>

<style scoped>
  .body{
    height: 100%;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }
  .dialog{

  }
</style>
